<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运动ing</title>
</head>
<body>
    <div class="app-motion">
        <!-- 顶部导航 -->
        <div class="top-nav dpflex">
            <div class="dpflex fdcolumn nav-text">
                <span>户外跑</span>
                <p>运动中</p>
            </div>
            <div class="icon-box">
                <i class="iconfont icon-music"></i>
                <i class="iconfont icon-set2"></i>
            </div> 
        </div>

        <!-- 路程记录 -->
        <div class="distance-record dpflex">
            <p><span>99.99</span>公里</p>
        </div>

        <!-- 地图图标 -->
        <div class="map dpflex">
            <span>GPS信号度低, 数据精确度低</span>
            <i class="iconfont icon-mapposition"></i>
        </div>

        <!-- 配速用时千卡 -->
        <div class="icon-list dpflex">
            <div class="dpflex fdcolumn">
                <i class="iconfont icon-speed"></i>
                <span>配速</span>
            </div>
            <div class="dpflex fdcolumn">
                <i class="iconfont icon-clock"></i>
                <span>用时</span></div>
            <div class="dpflex fdcolumn">
                <i class="iconfont icon-fire"></i>
                <span>千卡</span>
            </div>
        </div>

        <!-- 时间 -->
        <div class="time dpflex">
            <p>- -</p>
            <p>00:00:20</p>
            <p>3000</p>
        </div>

        <!-- 播放暂停控件 -->
        <div class="player-end-button dpflex">
            <!-- 播放 -->
            <div class="player dpflex fdcolumn">
                <i class="iconfont icon-player"></i>
                <span>继续</span>
            </div>
            <!-- 结束 -->
            <div class="end dpflex fdcolumn">
                <i class="iconfont icon-end"></i>
                <span>结束</span>
            </div>
        </div>
    </div>
</body>
</html>